<!--
 * @Author: Islands 1430536748@qq.com
 * @Date: 2024-07-21 23:32:01
 * @LastEditors: 周洋 1430536748@qq.com
 * @LastEditTime: 2024-07-23 00:04:15
 * @version: 1.2.2
 * @Description: 验证码登陆
-->
<script setup lang="ts">
import { Iphone, Lock } from "@element-plus/icons-vue";
import type { FormInstance, FormRules } from "element-plus";
import { $t } from '@/plugins/index';
import { validatePhone } from '@/utils/regular'
import { useCountDown } from "@/hooks";
const { countdown, countDown } = useCountDown();
const Constant = computed(() => {
    return {
        phone: $t(`login.placeholder.phone`),
        code: $t(`login.placeholder.code`),
        haveCode: $t(`login.button.haveCode`),
        timerAgain: $t(`login.placeholder.timerAgain`),
        submit: $t(`login.button.submit`)
    }
});
const ruleFormRef = ref<FormInstance>();
const rulesForm = computed<FormRules>(() => {
    return {
        username: [
            { required: true, message: $t(`login.placeholder.phone`, { prefix: $t(`common.placeholder.enter`) }), trigger: "click" },
            {
                validator: function (rule: any, value: any, callback: any) {
                    !validatePhone(value) ? callback(new Error($t(`login.placeholder.correctPhone`))) : callback;
                }, trigger: 'blur'
            }

        ],
        code: [
            { required: true, message: $t(`login.placeholder.code`, { prefix: $t(`common.placeholder.enter`) }), trigger: "click" },
        ],
    }
});
const loginForm = ref({
    username: '',
    code: '',
});
/** 获取验证码 */
const haveCodeEvent = () => {
    countDown(60);
    //todo 获取验证码
}
/** 提交登陆 */
const SubmitEvent = async (formEl: FormInstance | undefined, loginForm: any) => {
    if (!formEl) return;
    if (await formEl.validate()) {
        //todo 验证码登陆
        console.log("submit!");
    }
};
/** 重置表单 */
const resetForm = () => {
    ruleFormRef.value?.resetFields();
    ruleFormRef.value?.validateField();
}
defineExpose({
    resetForm
})
</script>
<template>
    <el-form ref="ruleFormRef" :model="loginForm" :rules="rulesForm" size="large">
        <el-form-item prop="username">
            <el-input :prefix-icon="Iphone" v-model="loginForm.username" :placeholder="Constant.phone" />
        </el-form-item>
        <el-form-item prop="code">
            <div class="flex flex-justify-between flex-items-center" style="width: 100%">
                <el-input :maxlength="6" style="width: 65%" :prefix-icon="Lock" v-model="loginForm.code"
                    :placeholder="Constant.code" />
                <el-button type="primary" :disabled="countdown > 0" @click="haveCodeEvent">
                    {{
                        countdown > 0
                            ? `${countdown}` + Constant.timerAgain
                            : Constant.haveCode
                    }}
                </el-button>
            </div>
        </el-form-item>
        <el-form-item>
            <el-button style="width: 100%" type="primary" auto-insert-space dark round
                @click="SubmitEvent(ruleFormRef, loginForm)">{{ Constant.submit
                }}</el-button>
        </el-form-item>
    </el-form>
</template>
<style scoped lang="scss">
:deep(.el-icon) {
    svg {
        width: 20px;
        height: 20px;
    }
}
</style>